<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch监听</title>
    <script src="vue.js"></script> 
   <script>
    /***
    watch 是指数据的监听
    能够取得 oldvalue & newvalue

    */

    window.onload = function(){
        var vm = new Vue({
            el:'#my',
            data:{
                name:'hanley',
                age:18,
                msg:'programmer',
                addr:'',
                obj:{address:'阆中',tel:'18650002030'}
            },
            methods:{
                action:function(newValue,oldValue){

                }
            },
            watch:{
                //第一种写法，监听name属性的值
                name:function(newValue,oldValue){
                    this.age = newValue;
                },
                //第二种写法，监听name属性的值
                'name'(newValue,oldValue){
                    this.age = newValue;
                },
                //第三种写法，监听age属性的值，发生变化则调用action方法
                age:'action',

                // 'obj.address'(newValue,oldValue){
                //     console.log('address has been changed');
                // },

                //第四中写法，监听对象
                obj:{
                    handler:(newValue,oldValue) =>{
                        console.log("newValue===="+newValue);
                        vm.addr = oldValue;
                    },
                    //深度监听，引用类型开启deep:true才会生效
                    deep:true
                }
                
            }
        });

        //name表示vue的属性名称
        vm.$watch('name',function(newValue,oldValue){
            console.log('name ',newValue,oldValue);
        });
    }


   </script>

</head>
<body>
    <div id="my">
        <input type="text" v-model="name" />
        <p>name:{{name}}</p>
        <p>age:{{age}}</p>
        <input type="text" v-model="obj.address" />
        <p>address:{{obj.address}}</p>
        <p>addr:{{addr}}</p>
    </div>
</body>
</html>